<template>
  <el-header>
    <div class="center" style="position: fixed;
            top: 0;left: 0;z-index: 10000       ;
            background-color: white;">
      <el-row gutter="10" style="background-color: #333;">
        <el-col span="4" style="width: 20%">
          <a href="/">
            <img src="http://rww08uahf.hn-bkt.clouddn.com/964a0f20e41b4303959890fe8c2231be.png" width="196" height="65"
                 style="margin-left: 50px">
          </a>
        </el-col>
        <el-col span="8" style="padding: 0">
          <el-menu :default-active="activeIndex" mode="horizontal" active-text-color="#fff" style="background-color: #333;text-align: center;width: 110%; border-bottom: solid 0;">
              <el-menu-item index="0" style="font-size: 20px;width: 80px" @click="toIndex()">首页
              </el-menu-item>
              <el-menu-item index="1" style="font-size: 20px;width: 80px" @click="toShop()">商城
              </el-menu-item>
              <el-menu-item index="2" style="font-size: 20px; width: 80px" @click="toSpansor()">
                  赞助
              </el-menu-item>
              <el-menu-item index="3" style="font-size: 20px; width: 80px" @click="toGame()">
                  休闲
              </el-menu-item>
              <el-menu-item index="4" style="font-size: 20px; width: 100px" @click="toMessageBoard()">
                  留言板
              </el-menu-item>
              <el-menu-item index="5" style="font-size: 20px; width: 100px" @click="toChat()">
                  聊天室
              </el-menu-item>
          </el-menu>
        </el-col>
        <el-col span="6" style="width: 305px;height: 60px">

        </el-col>
        <el-col span="2" style="text-align:right; ">
          <el-popover v-if="user==null"
                      placement="top-start"
                      title="欢迎来到kun吧"
                      width="200"
                      trigger="hover">
            <div slot="reference">
              <i class="el-icon-user" style="font-size: 35px;position: relative;margin:20px 20px;"></i>
            </div>
            <el-button type="info" @click="register()">注册</el-button>
            <el-button style="background-color: #3c32fb;color: white" @click="login()">登录</el-button>
          </el-popover>
          <el-popover v-else
                      placement="top-start"
                      title="欢迎来到kun吧"
                      width="200"
                      trigger="hover">
            <div slot="reference">
              <a href="/personalCenter.html">
                <el-avatar :src="user.avatar" style="font-size: 35px;position: relative;margin:20px 20px;"></el-avatar>
              </a>
            </div>
            <div style="text-align: center">
              <a href="/personalCenter.html">
                <el-avatar :src="user.avatar"></el-avatar>
              </a>
              <el-button type="text" @click="Popup" style="z-index: 99999; position: absolute; right: 5px; top: 62px; color: #bfc7cb">修改个人信息</el-button>
              <hr>
              <a>等级：{{ user.level }}</a>
              <br>
              <a @click="tointegral()">积分：{{ user.integral }}</a>
              <br>
              <a @click="tomessage()">消息</a>
              <br>
              <a @click="tocollection()">收藏</a>
              <br>
              <a href="javascript:void(0)" @click="logout()">退出登录</a><br>
              <a v-if="user.state==1" href="/admin.html">后台管理页面</a>
            </div>
          </el-popover>
        </el-col>
        <el-col span="2">
          <el-button style="margin-top: 20px" type="info" round @click="put()">发布</el-button>
        </el-col>
      </el-row>
    </div>
  </el-header>
</template>

<style>
.center {
  width: 100%;
  margin: 0 auto;
  min-width: 1200px;
}

</style>

<script>

module.exports = {
  name: 'Top',

  data() {
    return {
      key: '',
      activeIndex: "0",
      user: localStorage.user ? JSON.parse(localStorage.user) : null,
    }
  },
  created() {
    let s = window.location.pathname;
    if (s === "/index.html" || s === "/") {
      this.activeIndex = '0';
    } else if (s === "/shop.html") {
      this.activeIndex = '1';
    } else if (s === "/spansor.html") {
      this.activeIndex = '2';
    } else if (s==="/game.html"){
      this.activeIndex = '3';
    }  else if (s === "/MessageBoard.html") {
      this.activeIndex = '4';
    }
    else if (s === "/chat.html") {
        this.activeIndex = '5';
    }
    else {
      this.activeIndex = '';
    }
  },
  //
  methods: {
      toChat(){
          window.location.href="chat.html"
      },
    Popup(){
      window.open(
          "ChangeInfo.html",
          '_blank',
          'width=500,height=500,toolbar=no,' +
          'scrollbars=no,menubar=no,screenX=500,screenY=150',
      )
      // window.location.href="ChangeInfo.html"
      // this.region();
    },
    change(e){
      this.$forceUpdate()
    },
    logout() {
      if (confirm("您确认退出登录吗?")) {
        //发请求退出登录
        let url = 'http://localhost:8088/user/logout'
        this.axios.post(url).then(function () {
          localStorage.clear();//清空登录成功时保存的数据
          window.location.href = "index.html"
        })
      }
    },
    toGame(){
      window.location.href = "game.html"
    },
    tointegral(){
      window.location.href = "integral.html"
    },
    login() {
      window.location.href = "loginByPassword.html"
    },
    register() {
      window.location.href = "regByPhone.html"
    },
    toIndex() {
      console.log(this.activeIndex)
      window.location.href = "index.html"
    },
    toShop() {
      console.log(this.activeIndex);
      window.location.href = "shop.html"
    },
    toSpansor() {
      console.log(this.activeIndex)
      window.location.href = "spansor.html"
    },
    toMessageBoard() {
      console.log(this.activeIndex);
      window.location.href = "MessageBoard.html"
    },
    toBlogSelectSimilar() {
      localStorage.setItem('k',this.key)
      window.location.href = "blogSelectSimilar.html"
    },
    put()
    {
      window.location.href = "put.html"
    }
  }

}
</script>
<style>
.el-menu{
  width: 500px; padding: 15px 0 0 0; margin: 0 auto;
}
.el-menu-item:hover {
    background-color: lightpink !important;
}
</style>
